
<%--
  Created by IntelliJ IDEA.
  User: bo
  Date: 2015/8/16
  Time: 9:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page  import="java.util.*" language="java"  pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="one" uri="http://oneDay.com/tags" %>
<%@include file="../base/header.jsp"%>
<!--此标签的作用告诉浏览器按照W3c标准来解析此页面-->
<!DOCTYPE html>
<!--加上此标签所有css组件的引用都会有自动提示，便于代码的开发-->
<html lang="zh-CN">
<html>
<head>
  <title>圈子</title>
  <style>
    .myTitle{
      color: #080808;
      font-size: large;
    }
    .bootStyle{
      border-top: 1px solid #d5d5d5;
      margin-top: 100px;
    }
    .pic{
      width: 40px;
    }
    .a1{
      text-decoration: none;
    }
    .update_pic{
      border: 1px solid #e0e0e0;
      text-align: center;
      padding-top: 40px;
      height: 100px;
    }
    .up_img_btn{

    }
    *{ margin:0; padding:0;}
    #box{
      margin: 1px auto;
      min-height: 100px;
      text-align: center;
      background-color: #d5d5d5;
    }
    .div_hide{
      display: none;
    }
    a{
      text-decoration: none;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="/css/webuploader.css">
  <link rel="stylesheet" type="text/css" href="/css/diyUpload.css">
  <script type="text/javascript" src="/js/webuploader.html5only.min.js"></script>
  <script type="text/javascript" src="/js/diyUpload.js"></script>
</head>
<body>
<!--页头-->
<div class="jumbotron">
  <div class="container">
    <nav class="navbar">
      <div class="container-fluid">
        <%--<div class="navbar-header">--%>
        <%--<a class="navbar-brand" href="#">--%>
        <%--<img alt="Brand" src="/images/png/logo.png">--%>
        <%--</a>--%>
        <%--</div>--%>
        <ul class="nav navbar-nav">
          <li class="active"><a href="/book/book_menu.htm" class="myTitle">主页 <span class="sr-only">(current)</span></a></li>
          <li class="active"><a href="#" class="myTitle">我的书房 <span class="sr-only">(current)</span></a></li>
          <li class="active"><a href="#" class="myTitle">我的分享 <span class="sr-only">(current)</span></a></li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="书名/作者">
          </div>
          <button type="submit" class="btn btn-default">搜索</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <%--<li class="active"><a href="#" data-toggle="modal" data-target="#suggest" style="color: #080808;font-weight: 800">请帮助我们变得更好</a></li>--%>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="${user.imgUrl}" alt="..." class="img-circle pic">&nbsp;&nbsp;${user.name}的账号 <span class="caret"></span></a>
            <ul class="dropdown-menu" style="margin-top: 20px">
              <li><a href="user/get_profile.htm">个人资料</a></li>
              <li><a href="#">修改密码</a></li>
              <li><a data-toggle="modal" data-target="#upload" onclick="clearForm()">上传电子书</a></li>
              <%--<li role="separator" class="divider"></li>--%>
              <li><a href="user/logout.htm">退出</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-8">
      <form action="book/publish_mood.htm" id="mood_publish" method="post">
        <div class="row">
          <span class="glyphicon glyphicon-comment" style="margin-right: 2em;"> <a style="text-decoration: none" href="#">说句话</a></span>
          <span class="glyphicon glyphicon-picture"style="margin-right: 2em;">  <a id="up_img" style="text-decoration: none" onclick="update_img()" href="javascript:void(0);">发图片</a></span>
          <span class="glyphicon glyphicon-pencil" style="margin-right: 2em; "> <a style="text-decoration: none" href="book/get_blog_edit.htm">写日志</a> </span>
        </div>
        <div class="row">
          <textarea id="content" name="content" class="col-md-9" style="margin-top: 1em;resize:none"></textarea>
        </div>
        <div id="update_img_div" class="row div_hide">
          <div id="box" class="col-md-9">
            <div id="test"></div>
          </div>
        </div>
        <input id="imgUrls" style="display:none" name="imgUrls">
        <div class="row">
          <div class="col-md-9 text-right" style="padding-right: 0px;margin-top: 1em">
            <button type="button" class="btn btn-default" onclick="mood_publish()">发布</button>
          </div>
        </div>
      </form>

      <c:forEach var="mood" items="${page.result}">
        <div class="row">
          <div class="col-md-11" style="padding-left: 0px">
            <div class="col-md-2" style="padding-left: 0px">
              <a href="user/get_user_info.htm?uid=${mood.uid}" class="">
                <img style="width: 70px" src="${mood.imgUrl}"
                     alt="通用的占位符缩略图">
              </a>
            </div>
           <c:choose>
             <c:when test="${mood.type == 1}">
                <div class="col-md-10" style="margin-top: 1em;padding-left: 0px;border-bottom: 1px solid #d5d5d5;">
                 <p>${mood.userName} 写了日志：</p>
                 <p style="margin-left: 2em; font-weight: bolder; font-size: 1px;color: #000000"><a href="book/blog_detail.htm?bid=${mood.blog.id}">${mood.blog.title}</a></p>
                 <p style="margin-left: 2em;">${mood.blog.content}...</p>
                 <p style="margin-left:2em;margin-top: 3em;font-size: smaller"><fmt:formatDate value="${mood.addTime}" pattern="yyyy/MM/dd HH:mm:ss" /></p>
                </div>
             </c:when>
             <c:otherwise>
               <div class="col-md-10" style="margin-top: 1em;padding-left: 0px;border-bottom: 1px solid #d5d5d5;">
                 <p>${mood.userName} 说：</p>
                 <p style="margin-left: 2em;">${mood.content}</p>
                 <c:forEach items="${mood.images}" var="imageUrl">
                   <span><img width="100px" height="100px" src="${imageUrl}"></span>
                 </c:forEach>
                 <p style="margin-left:2em;margin-top: 3em;font-size: smaller"><fmt:formatDate value="${mood.addTime}" pattern="yyyy/MM/dd HH:mm:ss" />  <a id="comment_hide_${mood.id}" href="javascript:void(0);" style="display:none" onclick="commentHide(${mood.id})">&nbsp;&nbsp;隐藏评论</a>
                   <a style="text-decoration: none" id="comment_${mood.id}" href="javascript:void(0);" onclick="comment(${mood.id})">&nbsp;&nbsp;评论</a>
                   <a style="text-decoration: none" href="javascript:void(0);" onclick="mood_praise(${mood.id})">&nbsp;&nbsp;赞<c:if test="${not empty mood.praiseNum && mood.praiseNum != 0}">(${mood.praiseNum})</c:if></a>
                   <a style="text-decoration: none" href="javascript:void(0);" onclick="mood_forward()">&nbsp;&nbsp;转播</a>
                   <c:if test="${mood.uid == user.id
                   }">
                     <a style="text-decoration: none" href="javascript:void(0);" onclick="mood_delete(${mood.id})">&nbsp;&nbsp;删除</a></p>
                   </c:if>
                 <!--评论-->
                 <c:forEach items="${mood.comments}" var="comment">
                   <p style="font-size: smaller"><a>${comment.userName}</a>&nbsp;&nbsp;评论：${comment.content} &nbsp;&nbsp;-<fmt:formatDate value="${comment.addTime}" pattern="yyyy/MM/dd HH:mm:ss" /></p>
                 </c:forEach>
                 <!--评论元素-->
                 <form id="comment" action="book/mood_comment.htm" method="post">
                   <div id="${mood.id}" style="display: none" class="input-group">
                     <input id="mid" name="mid" hidden="hidden" type="text" value="${mood.id}">
                     <input id="commentContent" name="commentContent" type="text" placeholder="" maxlength="200" class="form-control">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button" onclick="commentSubmit(this)">发表回应</button>
                  </span>
                   </div><!-- /回应元素 -->
                 </form>
                 <br>
               </div>
             </c:otherwise>
           </c:choose>
          </div>
        </div>
      </c:forEach>
      <div class="row text-center">
        <one:pageNav page="${page}" href="book/read_circle.htm"/>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row">
        <div class="page-header" style="margin-top: 0px;">
            <h5 class="">
              <span class="">我关注的人</span>
              <a class="" href="#">(45人)</a>
            </h5>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>

      </div>
      <div class="row">
        <div class="page-header" style="margin-top: 0px;">
          <h5 class="">
            <span class="">关注我的人</span>
            <a class="" href="#">(45人)</a>
          </h5>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/477fd71e5146fe089bf1bdba3253bd05.png"
                 alt="通用的占位符缩略图">
          </a>
        </div>

      </div>
      <div class="row">
        <div class="page-header" style="margin-top: 0px;">
          <h5 class="">
            <span class="">我看过的书</span>
            <a class="" href="#">(108本)</a>
          </h5>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>

      </div>
      <div class="row">
        <div class="page-header" style="margin-top: 0px;">
          <h5 class="">
            <span class="">我想看的书</span>
            <a class="" href="#">(10本)</a>
          </h5>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>
        <div class="col-md-3" style="padding-left: 0px">
          <a href="#" class="thumbnail" style="padding: 0px">
            <img src="/images/jpg/s28096698.jpg"
                 alt="通用的占位符缩略图">
          </a>
        </div>

      </div>
    </div>
  </div>

</div>
<div class="row">
  <div class="container bootStyle">
    <p class="text-center">design by：<a>bob.yang</a></p>
  </div>
</div>
</body>
<script>
  function comment(id) {
    //显示回应框
    $("#" + id).show();
    //隐藏回应提示
    $("#comment_" +id).hide();
    //显示隐藏回应
    $("#comment_hide_" +id).show();
  }
  function commentHide(id) {
    //显示回应框
    $("#" + id).hide();
    //隐藏回应提示
    $("#comment_" +id).show();
    //显示隐藏回应
    $("#comment_hide_" +id).hide();
  }
  function commentSubmit(_this) {
    var form = $(_this).parent().parent().parent();
//    alert(form.find("input[name=commentContent]").val());
//    alert(form.serialize);
    var commentContent = form.find("input[name=commentContent]").val();
    if(commentContent == "") {
      form.find("input[name=commentContent]").attr("placeholder", "请输入评论的内容");
      form.find("input[name=commentContent]").css("border-color","salmon");
    }else {
      $.ajax({
        type:"post",
        url:"book/mood_comment.json",
        data:form.serialize(),//获得表单数据
        dataType:"json",
        async:false,
        error:function(request) {
          alert("网络发生了一个错误！")
        },
        success:function(data) {
          //刷新页面
          window.location.href="book/read_circle.htm";
        }
      });
    }
}

  //点赞
  function mood_praise(mid) {
    $.ajax({
      url:"book/mood_praise.htm?mid="+mid ,
      async:false,
      success: function(data){

      }
    });
    //刷新页面
    window.location.href="book/read_circle.htm";
  }

  //删除
  function mood_delete(mid) {
    $.ajax({url:"book/mood_delete.htm?mid="+mid ,async:false});
    //刷新页面
    window.location.href="book/read_circle.htm";
  }
  //发布心情
  function mood_publish() {
    $.ajax({
      type:"post",
      url:"book/publish_mood.htm",
      data:$("#mood_publish").serialize(),//获得表单数据
//      dataType:"json",
      async:false,
      error:function(request) {
        alert("网络发生了一个错误！")
      },
      success:function(data) {
        //刷新页面
        window.location.href="book/read_circle.htm";
      }
    });
  }

  $('#test').diyUpload({
    url:'book/update_img.json',
    success:function( data ) {
      console.info( data );
    },
    error:function( err ) {
      console.info( err );
    }
  });

  $('#as').diyUpload({
    url:'book/update_img.json',
    success:function( data ) {
      alert(data.imgUrl);
      console.info( data );
    },
    error:function( err ) {
      console.info( err );
    },
    buttonText : '选择文件',
    chunked:true,
    // 分片大小
    chunkSize:512 * 1024,
    //最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
    fileNumLimit:50,
    fileSizeLimit:500000 * 1024,
    fileSingleSizeLimit:50000 * 1024,
    accept: {}
  });

  //转播
  function mood_forward() {
    alert("敬请期待！");
  }

  //判断是否是隐藏
  function update_img() {
    if($("#update_img_div").is(':hidden')){
      $("#update_img_div").show();
      onUpload();
    }else {
      $("#update_img_div").hide();
    }
  }

  //引用js
  function onUpload(){
    $('#test').diyUpload({
      url:'book/update_img.json',
      success:function( data ) {
        console.info( data );
        var urls = $('#imgUrls').val();
        if(urls == null || urls == "") {
          urls = data.imgUrl;
        }else {
          urls = urls + "|" + data.imgUrl;
        }
        $('#imgUrls').val(urls);
      },
      error:function( err ) {
        console.info( err );
      }
    });
  }
</script>

</html>
